<%@page import="java.io.FileReader"%>
<%@page import="java.io.File"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>


<html>
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="css/buttons.css" type="text/css" media="screen" /> 
<title>Blog content page</title>
<style type="text/css">
header,section,footer,aside,nav,article,figure,figcaption {
	display: block;
}

body {
	color: #666666;
	background-color: #f9f8f6;
	background-image: url("images/dark-wood.jpg");
	background-position:center; 
	font-family: Georgia, times, serif;
	line-height: 1.4em;
	background-position:right top;
}

div.editarea {
	margin: 20px;
}



button.editbutton {
	margin: 20px;
}

.wrapper {
	width: 1000px;
	margin: 20px auto 20px auto;
	border: 2px solid #000000;
	background-color: #ffffff;
}

#articlecontent {
	background-color: #ddd;
	padding: 20px;
	margin: 20px;
}

#titlegroup {
	padding: 10px;
	margin-left: 30%;
	margin-top: 5%;
}

figure {
	float: left;
	width: 200px;
	height: 150px;
	padding: 15px;
	margin-left: 20px;
	margin-top: 25px;
	border: 1px solid #eeeeee;
	background-color: #eee;
}

header {
	height: 160px;
	background-image: url(<%=basePath%>images/header.jpg);
}

h1 {
	text-indent: -9999px;
	width: 940px;
	height: 130px;
	margin: 0px;
}

nav,footer {
	clear: both;
	color: #ffffff;
	background-color: #aeaca8;
	height: 30px;
}

nav ul {
	margin: 0px;
	padding: 5px 0px 5px 30px;
}

nav li {
	display: inline;
	margin-right: 40px;
}

nav li a {
	color: #ffffff;
}

nav li a:hover,nav li a.current {
	color: #000000;
}

section.articles {
	float: left;
	width: 690px;
	border: 1px solid #dddddd;
}

section.comments {
	float: left;
	width: 610;
	margin: 10px;
	padding: 10px;
	/*border-top: 1px solid gray*/
}

article {
	clear: both;
	width: 100%;
}

hgroup {
	margin-top: 40px;
}

figcaption {
	font-size: 90%;
	text-align: left;
}

aside {
	width: 210px;
	float: left;
	padding: 0px 0px 0px 20px;
}

aside section {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #eeeeee;
}

aside section a:hover {
	color: #985d6a;
	background-color: #efefef;
}

a {
	text-decoration: none;
}

h1,h2,h3 {
	font-weight: normal;
}

h2 {
	margin: 10px 0px 5px 0px;
	padding: 0px;
}

h3 {
	margin: 0px 0px 10px 0px;
	color: #de6581;
}

aside h2 {
	padding: 30px 0px 10px 0px;
	color: #de6581;
}

footer {
	font-size: 80%;
	padding: 7px 0px 0px 20px;
}

h2.log_in,h2.aside,h2.comments,h2.contact {
	color: #613D2D;
}

a.aside_h3 {
	color: #E95D22;
	font-style: italic;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



<script type="text/javascript" src="<%=basePath %>tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
	oninit : "setPlainText",
	mode : "specific_textareas",
	editor_selector : "articleEditor"
    
 });
</script>

</head>
<body>
	<div class="wrapper">
		<header>
			<h1>Blog page</h1>
			<nav>
				<ul>
					<li><a href="articles" class="current">home</a></li>
					<li><a href="#contact">contact</a></li>
				</ul>
			</nav>
		</header>
		<form action="articles/${article.id}" method="post">
			<section class="articles">
				<div>
					<figure>
						<c:choose>
							<c:when test="${not empty article.images}">
								<img class="article_image" src="<%=basePath%>${article.images.get(0).path }"
									width="194" height="146" />
							</c:when>
							<c:otherwise>
								<img src="<%=basePath%>images/default.jpg" width="194"
									height="146" />
							</c:otherwise>
						</c:choose>
					</figure>
				</div>

				<div id="titlegroup">
					<h2>
						<a href="">${article.title }</a>
					</h2>
					<br>
					<h3>By ${article.user.name } posted ${article.date }</h3>
					<h3>Current user: ${user.name}</h3>

				</div>
				<br>
				<br>
				<div id="articlecontent">${article.content }</div>

				<c:if test="${not empty user}">
					<c:choose>
						<c:when test="${user.name == article.user.name}">
							<div class="editarea">
								<textarea cols="78" rows="30" id="plcontent" name="plcontent" class="articleEditor"> ${article.content}</textarea>
								<br>
								<button type="submit" id="editbutton" name="editbutton"
									class="articles">Edit</button>
								<button type="submit" id="deletebutton" name="deletebutton"
									class="articles" formaction="articles/delete/${article.id}">Delete</button>
							</div>
						</c:when>
					</c:choose>
				</c:if>
				
				<!-- Comment Section -->
				<section class="articles">
					<div class="editarea">
						Name: <input type="text" name="name" value="" size="102" />
						<br /> 

						<p>Comment content:</p>
						<textarea cols="78" rows="10" id="content" name="content"></textarea>
						<br />
						<button type="submit" id="addbutton" name="addbutton" formaction="articles/addcomment/${article.id}">Submit</button>
					</div>
				</section>
				
			</section>
		</form>
		<aside>
			
			<section class="contact-details" id="contact">
				<h2 class="contact">Contact</h2>
				<p class="author">
					@Author <br /> Zheng <br /> Xiaofei
				</p>
			</section>
			
			<section class="comments">
				<h2>Comments</h2>
				<c:forEach var="comment" items="${article.comments}">
					<div>${comment.content}</div>
				</c:forEach>
			</section>
		</aside>
		<footer> &copy; 2013 EA's Final Project: Blog </footer>
	</div>
	<!-- .wrapper -->
</body>
</html>